<!-- 底部导航栏组件 -->
<template>
  <div class="tab-bar">
    <div 
      v-for="(item, index) in tabItems" 
      :key="index"
      class="tab-item"
      :class="{ active: currentTab === item.name }"
      @click="switchTab(item.name)"
    >
      <!-- 其他图标使用原来的svg-icon组件 -->
      <svg-icon
        :iconName="item.icon" 
        class="tab-icon"
        :style="{ color: currentTab === item.name ? '#fb8fae' : '#666' }"
      />
      <span class="tab-text">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  data() {
    return {
      currentTab: 'home',
      defaultTabItems: [
        {
          name: 'home',
          title: '账单',
          icon: 'icon-wj-zd'
        },
        {
          name: 'category',
          title: '图表',
          icon: 'icon-tubiao'
        },
        {
          name: 'cart',
          title: '记一笔',
          icon: 'icon-jia'
        },
        {
          name: 'find',
          title: '发现',
          icon: 'icon-iconfontzhizuobiaozhun023103'
        },
        {
          name: 'my',
          title: '我的',
          icon: 'icon-foot04'
        }
      ],
      tabItems: []
    }
  },
  mounted() {
    this.loadIconData();
    // 监听localStorage变化
    window.addEventListener('storage', this.handleStorageChange);
    // 自定义事件监听（用于同一页面内的通信）
    window.addEventListener('icon-changed', this.loadIconData);
  },
  beforeUnmount() {
    window.removeEventListener('storage', this.handleStorageChange);
    window.removeEventListener('icon-changed', this.loadIconData);
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        const path = to.path
        const tabName = path.split('/')[1] || 'home'
        this.currentTab = tabName
      }
    }
  },
  methods: {
    handleStorageChange(e) {
      if (e.key === 'selected-icon') {
        this.loadIconData();
      }
    },
    loadIconData() {
      // 读取保存的图标数据
      const savedIcon = localStorage.getItem('selected-icon');
      
      if (savedIcon) {
        const iconData = JSON.parse(savedIcon);
        const iconMap = {};
        
        // 建立标题到图标的映射
        iconData.icon_name.forEach(item => {
          iconMap[item.title] = item.icon;
        });
        
        // 更新tabItems
        this.tabItems = this.defaultTabItems.map(item => {
          const newIcon = iconMap[item.title];
          return {
            ...item,
            icon: newIcon || item.icon // 如果找不到对应图标，使用默认图标
          };
        });
      } else {
        // 如果没有保存的数据，使用默认图标
        this.tabItems = [...this.defaultTabItems];
      }
    },
    switchTab(tabName) {
      this.currentTab = tabName
      this.$router.push(`/${tabName}`)
    }
  }
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  /* background-color: #fff; */
  background-image: var(--skin-bg-image) !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.tab-icon {
  font-size: 60px;
  margin-bottom: 2px;
  width: 1em;
  height: 1em;
}

/* 为第三个图标（记一笔）设置特殊大小 */
.tab-item:nth-child(3) .tab-icon {
  position: absolute;
  top: -20px;
  font-size: 80px;
  color: #5e0e25 !important;
}

.tab-item:nth-child(3) .tab-text {
  position: absolute;
  top:70px;
}

.tab-text {
  font-size: 28px;
  color: #fff;
}

.tab-item.active .tab-text {
  color: red !important;
}
</style> 